<template>
  <div>
    <TitleExample v-if="data.imgList.length" :config='data'></TitleExample>

    <div class="upload_img" :style="(imgList.length==1?'justify-content:flex-start':'')">
      <div class="img_box" v-for="(item,index) in imgList" :key="index" @click="changeIndex(index)">
        <div class="up_img" :style="'background:url('+item.url+')no-repeat;background-size: 100% 100%'">
          <div class="virtual"></div>
          <van-uploader class="opacity" :after-read="afterRead" />
          <van-icon v-show="!item.upLoadImg" name="plus" size='40px' />
          <img v-show="item.upLoadImg" :src="item.upLoadImg" alt="">
        </div>
        <p>{{item.name}}</p>

      </div>
      
    </div>
  </div>
</template>
<script>
import TitleExample from "../form/title_example";
// import aliyunOss from "@/assets/js/aliyun_oss";

export default {
  name: "upload_img",
  components: {
    TitleExample
  },
  props: {
    config: {
      type: Object,
      required: true
    },
    parentIndex: Number,
    itemIndex: Number
  },
  data() {
    return {
      data: {
        attrName: "上传图片",
        imgList: []
      },
      imgList: [],
      Image: "",
      index: 0
    };
  },
  created() {

    this.getApollo();
  },
  watch: {
    imgList(n, o) {
      let array = [];
      n.forEach(item => {
        if (item.upLoadImg) {
          array.push({url:item.upLoadImg,name:item.name});
        }
      });
      if (array.length == this.imgList.length) {
        this.config.value = array;
        this.$emit(
          "changeValue",
          this.parentIndex,
          this.itemIndex,
          this.config
        );
        // console.log("上传图片===》", n);
      }
    }
  },
  methods: {
    afterRead(file) {
      // 此时可以自行将文件上传至服务器
      this.$toast.loading({
        duration: 0, // 持续展示 toast
        forbidClick: true, // 禁用背景点击
        loadingType: "spinner",
        message: "上传中"
      });
      let that = this;
      var timestamp = new Date().getTime();
      // this.aliyunOss
      //   .getClient()
      //   .put("Vha/" + timestamp + file.file.name, file.file)
      //   .then(res => {
      //     this.$toast.clear();
      //     if (res.res.status == 200) {
      //       let list = JSON.parse(JSON.stringify(that.imgList));
      //       list[that.index].upLoadImg = res.url;
      //       that.imgList = list;
      //     } else {
      //       Toast.fail("上传失败");
      //     }
      //   });
    },
    changeIndex(e) {
      this.index = e;
    },
    getApollo() {
      let params = {
        spaceName: "JSONImages",
        key: this.config.attrKeyName
      };
      let that = this,
        array;
      this.$api.handleGet("/api/v1/QueryApolloSettings", params, result => {
        if (result) {
          if (typeof result == "string") {
            array = result.replace(/\s*/g, "").replace(",]", "]");
            that.imgList = JSON.parse(array).images;
          } else {
            that.imgList = result.images;
          }
          that.data = {
            attrName: "上传图片",
            imgList: that.imgList
          };
          // that.imgList = JSON.parse(array).images;
          if(typeof(that.config.value) == 'string'){
            that.config.value = JSON.parse(that.config.value)
          }
          if (that.config.value && that.config.value.length) {
            that.config.value.forEach((item, index) => {
              that.imgList[index].upLoadImg = item.url;
              that.imgList[index].name = item.name;
            });
          }else{
            that.imgList.forEach(item => {
            item.upLoadImg = "";
          });
          }
          
          
        }
      });
    }
  }
};
</script>
<style lang="less">
.upload_img {
  padding: 0.133333rem;
  background: #fff;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  flex-wrap: wrap;
  box-shadow: 0px 0px 10px 0px rgba(161, 161, 161, 0.12);
  .img_box {
    padding: 0.186667rem 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    .up_img {
      width: 2.453333rem;
      height: 2.453333rem;
      position: relative;
      margin-bottom: 0.266667rem;
      background: url("https://img.yzcdn.cn/2.jpg");
      background-size: 100% 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 0.266667rem;

      .opacity {
        opacity: 0;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 99;
        .van-uploader__upload {
          width: 2.453333rem;
          height: 2.453333rem;
          margin: 0;
        }
      }
      img {
        width: 100%;
        height: 100%;
        background: #fff;
        z-index: 11;
      }
      .virtual {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(255, 255, 255, 0.3);
        z-index: 2;
        border: 1px dashed #999;
      }
    }
    // .up_img:after {
    //   content: "";
    //   width: 100%;
    //   height: 100%;
    //   position: absolute;
    //   left: 0;
    //   top: 0;
    //   background: inherit;
    //   filter: blur(1px);
    // 	z-index:2;

    // }
    p {
      text-align: center;
      width: 2.346667rem;
      font-size: 0.32rem;
      font-family: PingFangSC-Regular;
      color: rgba(164, 164, 164, 1);
      line-height: 0.453333rem;
    }
  }
}
</style>

